<template>
  <div class="page-container">
    <div class="grid-container">
      <a-row type="flex" class="grid-table-tool">
        <a-col :span="12" :order="1" class="tool-action">
        </a-col>
        <a-col :span="12" :order="2" class="tool-pagination">
          <a-button type="primary" @click="onEdit(null)">新增</a-button>
        </a-col>
      </a-row>
      <a-table bordered :columns="columns" :dataSource="dataList" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
        <template  slot="index"  slot-scope="text,record,index">
          {{index+1}}
        </template>
        <template slot="operation" slot-scope="text,record">
          <a @click="onEdit(record)"  class="ant-btn-text">
            <a-icon :type="record.isInit?'search':'form'" />
          </a>
          <a-divider type="vertical" v-if="!record.isInit" />
          <a @click="onDeleted(record.id)"  class="ant-btn-text" v-if="!record.isInit"><a-icon type="delete" /></a>
        </template>
      </a-table>
    </div>
    <a-modal :title="title" v-model="editVisible"  :footer="null" >
      <table-edit :model="model" @save="handleEditEmit" v-if="editVisible"></table-edit>
    </a-modal>
  </div>
</template>
<script>
  import {findListByType, saveDetail, deleted} from "../../../api/pubData";
  import TableEdit from "./Edit"
  const columns = [
    {title: '序号', dataIndex: 'index',width: 60,align:'center',scopedSlots: { customRender: 'index' }},
    {title: '名称',dataIndex: 'name',align:'left',width: 200},
    {title: '编码',dataIndex: 'code',width: 200,align:'center'},
    {title: '备注',dataIndex: 'remark',align:'left'},
    {title: '操作',key: 'operation',align:'center',width: 120,scopedSlots: { customRender: 'operation' }}];
  export default {
    components:{TableEdit},
    props:{ dataType:Object },
    data() {
      return {
        columns,
        dataList: [],
        editVisible:false,
        title:'新增',
        loading:false,
        model: null,
        allType:{Role:100,Coupon:101,Bill:102,NoticeLocation:103,ADLocation:104}
      }
    },
    methods: {
      //编辑
      async onEdit(record){
        this.editVisible = true;
        this.title = (record == null ? '新增' : '编辑') + this.dataType.name;
        this.model = record;
      },
      onClose(){
        this.editVisible = false;
      },
      async handleEditEmit(key, data){
        if(key == "add"){
          data.dataType = this.dataType.id
          let resp = await saveDetail(data)
          if(this.qUtil.validResp(resp)){
            this.$message.success('数据已保存');
            this.onClose();
            this.onLoad();
          }
        }else {
          this.onClose();
        }
      },
      //删除
      onDeleted(id){
        const that = this
        this.$confirm({title: '确认删除这条记录信息吗?', okText: '确认', okType: 'danger', cancelText: '取消',
          onOk() {that.handleDelete(id);}, onCancel() {},
        });
      },
      async handleDelete(id){
        let resp = await deleted(id);
        if(this.qUtil.validResp(resp)) {
          this.$message.success('数据已删除');
          this.onLoad();
        }
      },
      async onLoad(){
        this.loading = true;
        let resp = await findListByType(this.dataType.id);
        this.loading = false;
        if(!this.qUtil.validResp(resp)) return false;
        this.dataList = resp.data.dataList || [];
      }
    },
    mounted(){
      if(this.dataType != null) {
        this.onLoad();
      }
    }
  }
</script>
<style>

</style>
